<template lang="html">
    <div  v-loading="loading">
      <el-form :model="pageData" :rules="rules" ref="ruleForm" label-width="160px" class="demo-ruleForm">
          <el-form-item label="一级分类" prop="authStatus">
            <el-select v-model="pageData.firstCategoryId" placeholder="请选择" filterable @change="getTwoClassName">
              <el-option value="">请选择</el-option>
               <el-option
                 v-for="item in oneClass"
                 :key="item.categoryId"
                 :label="item.categoryName"
                 :value="item.categoryId">
               </el-option>
             </el-select>
           </el-form-item>
           <el-form-item label="二级分类" prop="authStatus">
             <el-select v-model="pageData.secondCategoryId" placeholder="请选择" @change="getBrand">
               <el-option value="">请选择</el-option>
                <el-option
                  v-for="item in twoClass"
                  :key="item.categoryId"
                  :label="item.categoryName"
                  :value="item.categoryId">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="品牌" prop="authStatus">
              <el-select v-model="pageData.brandId" placeholder="请选择">
                <el-option value="">请选择</el-option>
                 <el-option
                   v-for="item in brand"
                   :key="item.brandId"
                   :label="item.brandCname"
                   :value="item.brandId">
                 </el-option>
               </el-select>
             </el-form-item>
             <el-form-item label="商品主名称">
                 <el-input v-model="pageData.goodsName" placeholder="请输入内容" type="textarea"></el-input>
              </el-form-item>
              <el-form-item label="商品副标题">
                  <el-input v-model="pageData.goodsAliasName" placeholder="请输入内容" type="textarea"></el-input>
               </el-form-item>
               <el-form-item label="商品标签:多个以,隔开">
                   <el-input v-model="pageData.goodsLabes" placeholder="请输入内容" type="textarea"></el-input>
                </el-form-item>
                <el-form-item label="商品条形码">
                    <el-input v-model="pageData.goddsBarcode" placeholder="请输入内容"></el-input>
                 </el-form-item>
                 <el-form-item label="商品类型" prop="authStatus">
                   <el-select v-model="pageData.goodsType" placeholder="请选择">
                     <el-option value="">请选择</el-option>
                      <el-option
                        v-for="item in goodstype"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                      </el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item label="商品描述">
                      <el-input v-model="pageData.goodsDesc" placeholder="请输入内容"></el-input>
                   </el-form-item>
                   <el-form-item label="商品价格-售价">
                       <el-input v-model="pageData.salePrice" placeholder="请输入内容"></el-input>
                    </el-form-item>
                    <el-form-item label="是否可以分享" prop="authStatus">
                      <el-select v-model="pageData.isShare" placeholder="请选择">
                        <el-option value="">请选择</el-option>
                         <el-option
                           v-for="item in isshare"
                           :key="item.value"
                           :label="item.label"
                           :value="item.value">
                         </el-option>
                       </el-select>
                     </el-form-item>
                   <el-form-item label="商品价格-商品原价">
                       <el-input v-model="pageData.originPrice" placeholder="请输入内容"></el-input>
                    </el-form-item>
                    <el-form-item label="商品总库存">
                        <el-input v-model="pageData.totalStock" placeholder="请输入内容"></el-input>
                     </el-form-item>
                     <el-form-item label="库存状态" prop="authStatus">
                       <el-select v-model="pageData.stockStatus" placeholder="请选择">
                         <el-option value="">请选择</el-option>
                          <el-option
                            v-for="item in stockstatus"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                          </el-option>
                        </el-select>
                      </el-form-item>
                      <el-form-item label="降价通知服务" prop="authStatus">
                        <el-select v-model="pageData.isReducePriceServer" placeholder="请选择">
                          <el-option value="">请选择</el-option>
                           <el-option
                             v-for="item in isReducepriceServer"
                             :key="item.value"
                             :label="item.label"
                             :value="item.value">
                           </el-option>
                         </el-select>
                       </el-form-item>
                       <el-form-item label="促销信息">
                           <el-input v-model="pageData.promotionInfo" placeholder="请输入内容"></el-input>
                       </el-form-item>
                       <el-form-item label="服务保障">
                           <el-input v-model="pageData.serviceGuarantee" placeholder="请输入内容" type="textarea"></el-input>
                       </el-form-item>
                       <el-form-item label="售后服务说明">
                           <el-input v-model="pageData.afterServeiceIns" placeholder="请输入内容"></el-input>
                       </el-form-item>
                       <el-form-item label="是否质检" prop="authStatus">
                         <el-select v-model="pageData.isQuality" placeholder="请选择">
                           <el-option value="">请选择</el-option>
                            <el-option
                              v-for="item in isquality"
                              :key="item.value"
                              :label="item.label"
                              :value="item.value">
                            </el-option>
                          </el-select>
                        </el-form-item>
                        <el-form-item label="质检报告" prop="authStatus" v-if="pageData.isQuality == 'Y'">
                          <el-select v-model="pageData.qualityNo" placeholder="请选择">
                            <el-option value="">请选择</el-option>
                             <el-option
                               v-for="item in qualityno"
                               :key="item.reportNo"
                               :label="item.title"
                               :value="item.reportNo">
                             </el-option>
                           </el-select>
                         </el-form-item>
                         <el-form-item label="质检流程" prop="authStatus">
                           <el-select v-model="pageData.procedureId" placeholder="请选择">
                             <el-option value="">请选择</el-option>
                              <el-option
                                v-for="item in procedure"
                                :key="item.procedureId"
                                :label="item.procedureName"
                                :value="item.procedureId">
                              </el-option>
                            </el-select>
                          </el-form-item>
                          <el-form-item label="是否可用优惠券" prop="authStatus">
                            <el-select v-model="pageData.isCoupon" placeholder="请选择">
                              <el-option value="">请选择</el-option>
                               <el-option
                                 v-for="item in iscoupon"
                                 :key="item.value"
                                 :label="item.label"
                                 :value="item.value">
                               </el-option>
                             </el-select>
                           </el-form-item>
                           <el-form-item label="物流重量（千克）">
                               <el-input v-model="pageData.logisticsWeight" placeholder="请输入内容"></el-input>
                           </el-form-item>
                           <el-form-item label="物流体积（平方米）">
                               <el-input v-model="pageData.logisticsVol" placeholder="请输入内容"></el-input>
                           </el-form-item>
            <el-form-item class="confirm">
               <el-button type="primary" @click="submitForm('post')">提交</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
  import Data from './Data.js'
  import {
    oneClasList,
    twoClasList,
    addCompileProduct,
    getClassBrand
  } from "@/api/shoppingCentre/productCentre";
  import {
      brandAdminList,
  } from "@/api/shoppingCentre/brandAdmin";
  import {
    reportList,
  } from "@/api/shoppingCentre/shoppingCentre";
  import {
    flowList,
    goodsBasicDetails
  } from "@/api/shoppingCentre/shoppingCentre";
export default {
    data () {
      return JSON.parse(JSON.stringify(Data))
    },
    mounted () {
      this.getClass();
      this.getreportListList();
      this.getflowList();
    },
    methods : {
      getGoodsDetails (id) {

        goodsBasicDetails (id).then(res=>{
          if (res.data.code == 'OK') {
            // this.loading = false;
            this.pageData.firstCategoryId = res.data.data.firstCategoryId;
            this.pageData.goodsName = res.data.data.goodsName;
            this.pageData.goodsAliasName = res.data.data.goodsAliasName;
            this.pageData.goodsLabes = res.data.data.goodsLabes;
            this.pageData.goodsType = res.data.data.goodsType;
            this.pageData.goodsDesc = res.data.data.goodsDesc;
            this.pageData.salePrice = res.data.data.salePrice;
            this.pageData.isShare = res.data.data.isShare;
            this.pageData.originPrice = res.data.data.originPrice;
            this.pageData.totalStock = res.data.data.totalStock;
            this.pageData.stockStatus = res.data.data.stockStatus;
            this.pageData.isReducePriceServer = res.data.data.isReducePriceServer;
            this.pageData.promotionInfo = res.data.data.promotionInfo;
            this.pageData.serviceGuarantee = res.data.data.serviceGuarantee;
            this.pageData.afterServeiceIns = res.data.data.afterServeiceIns;
            this.pageData.isQuality = res.data.data.isQuality;
            this.pageData.qualityNo = res.data.data.qualityNo;
            this.pageData.procedureId = res.data.data.procedureId;
            this.pageData.isCoupon = res.data.data.isCoupon;
            this.pageData.logisticsWeight = res.data.data.logisticsWeight;
            this.pageData.logisticsVol = res.data.data.logisticsVol;
            this.getTwoClassName(res.data.data.firstCategoryId,res.data.data.secondCategoryId)
            this.getBrand(this.pageData.secondCategoryId,res.data.data.brandId)
            this.$store.state.category.goodsId = res.data.data.goodsId;
            this.pageData.goodsId = res.data.data.goodsId;
              this.loading = false;
          }
        })
      },
      submitForm (method) {
          addCompileProduct(this.pageData,method).then(res=>{
             if (res.data.code == 'OK') {
               this.$message({
                   message: '新增成功',
                   type: 'success'
                 });
                this.$store.state.category.idx = '3'
               this.$store.state.category.goodsId = res.data.data.goodsId;
             } else {
               this.$message.error(res.data.message)
             }
          })
      },
      getclassbrand (id) {//获取分类+品牌列表
          getClassBrand(id).then(res=>{
              if (res.data.code == 'OK') {
                this.brand = res.data.data.brandList;
                console.log(res);
              }
          })
      },
      getBrand (id,brandId) {//获取品牌
        if (brandId) {
          this.pageData.brandId = brandId;
        }
        this.categoryId = id;
        this.$store.state.category.categoryId = id
        this.getclassbrand(id)
      },
      getflowList () {//获取流程
          flowList ().then(res=>{
            if (res.data.code == 'OK') {
              this.procedure = res.data.data.records;
            }
          })
      },
      getreportListList(){//获取报告
        reportList().then(res=>{
          if (res.data.code == 'OK') {
            this.qualityno = res.data.data.records;
            console.log(res);
          }
        })
      },
      getClass () {//分类
          oneClasList().then(res=>{
             if (res.data.code == 'OK') {
               setTimeout(()=>{
                 this.loading = false;
               },2000)
                  this.oneClass = res.data.data;
                  if(this.$route.query.id) {
                    this.$store.state.category.goodsId = ''
                     this.getGoodsDetails(this.$route.query.id)
                  }
             } else {
               this.$message.error(res.data.message)
             }
          })
      },
      getTwoClassName (id,twoId) {//获取一级分类id
        this.pageData.secondCategoryId = '';
        this.twoClass = [];
        this.oneClass.map(item=>{
          if (item.categoryId == id) {
              this.twoClass = item.childrens;
              if (twoId) {
                this.pageData.secondCategoryId = twoId;
              }
          }
        })
      },
    }
}
</script>

<style scoped>
  .el-form  {
    width:400px;
  }
  .el-select {
    width: 241px;
}
</style>
